<template>
  <view class="mine-wrap">
    <view class="mine-card">
      <view class="card-wrap" @click="toLogin">
        <image class="card-head" :src="userInfo.avatarUrl || userHeadDefault"></image>
        <view :class="userInfo.userName ? 'userName' : 'login-rn'">
          <text>{{userInfo.nickName || '立即登录'}}</text>
        </view>
        <view class="card-sign">
          <text class="iconfont icon-shangyinhao"></text>
          <text space="nbsp" style="padding: 0 10rpx;">{{userInfo && userInfo['sign'] ? userInfo['sign'] : '睡好觉，一身轻~'}}</text>
          <text class="iconfont icon-xiayinhao"></text>
        </view>
      </view>
    </view>
    <view class="mine-menu">
      <view class="menu-wrap">
        <view :class="{'menu-item': true, 'disabled': !userInfo}" @click="userInfo ? navigator('sleepHistory') : false">
          <text class="iconfont icon-jilu"></text>
          <text>我的睡眠记录</text>
          <text class="iconfont icon-arrowRight"></text>
        </view>
		<!-- disabled：置灰-->
        <view :class="{'menu-item': true, 'disabled': !userInfo}" @click="userInfo ? navigator('myMusic') : false">
          <text class="iconfont icon-shoucang"></text>
          <text>我收藏的音乐</text>
          <text class="iconfont icon-arrowRight"></text>
        </view>
        <view class="menu-item" @click="navigator('advisory')">
          <text class="iconfont icon-zixun"></text>
          <text>问卷调查</text>
          <text class="iconfont icon-arrowRight"></text>
        </view>
		<view v-if="userInfo" class="menu-item"@click="logout()" >
		    <text class="iconfont icon-shoucang"></text>
		    <text>退出登录</text>
		    <text class="iconfont icon-arrowRight"></text>
		  </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        userInfo: {
          nickName: '未登录',
          avatarUrl: 'https://img-blog.csdnimg.cn/20210203221305298.jpg',
          sign: '好好睡觉，比什么都幸福~'
        },
        userHeadDefault: require("../../static/images/user-head-default.jpg")
      }
    },
	onShow() {
		let user = uni.getStorageSync('user');
		this.userInfo = user;
	},
	// methods:方法
    methods: {
      navigator(to){
        uni.navigateTo({
          url: `/pages/${to}/${to}`,
          animationType: "pop-in",
          animationDuration: 200
        })
      },
	  
	  // toLogin：去登录
	  toLogin(){
		  // navigateTo：保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。
		  uni.navigateTo({
		  	url: '../login/login',
		  });
	  },
	  // logout：退出登录
	  logout(){
	     this.userInfo = null;
		 // reLaunch：关闭所有页面，打开到应用内的某个页面。
	     uni.reLaunch({
	      url:'/pages/monitor/monitor',
	     })
		 // clearStorage：清除缓存
	     uni.clearStorage();
	    }
    }
  }
</script>

<style lang="scss">
  .mine-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    overflow: hidden;

    >view {
      width: 100vw;
      overflow: hidden;
    }
  }

  .mine-card {
    flex: 2;

    .card-wrap {
      position: relative;
      padding-top: 60rpx;
      width: 72vw;
      height: 60%;
      margin: 10vh auto 0 auto;
      border-radius: 14rpx;
      box-shadow: 0 8rpx 18rpx rgba($color: #000000, $alpha: .2);
      background: url(../../static/images/sign-background.jpg);

      .login-rn,
      .userName {
        font-size: 36rpx;
        font-weight: 600;
      }

      .login-rn {
        margin-left: 165rpx;
        color: $sleep-text-color;
      }

      .userName {
        margin-left: 150rpx;
        color: #333;
      }

      .card-sign {
        display: -webkit-box;
        margin-top: 80rpx;
        text-align: center;
        font-size: 30rpx;
        color: #BBBBBB;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        /* #ifndef APP-PLUS */
        padding: 32rpx 16rpx;
        margin-top: 0;
        font-size: 26rpx;
        /* #endif */
      }
    }

    .card-head {
      position: absolute;
      top: -36rpx;
      left: -36rpx;
      width: 145rpx;
      height: 145rpx;
      border-radius: 50vw;
      border: 4rpx white solid;
      box-shadow: 0 6rpx 10rpx rgba($color: #000000, $alpha: .2);
    }
  }

  .mine-menu {
    flex: 3;

    .menu-wrap {
      width: 91vw;
      margin: 0 auto;
      /* #ifndef APP-PLUS */
      margin: 20rpx auto 0 auto;
      /* #endif */
      background-color: #FFFFFF;
      border-radius: 16rpx;
      box-shadow: 0 6rpx 18rpx rgba($color: #000000, $alpha: .2);
    }

    .menu-item {
      padding: 70rpx 0;
      font-size: 32rpx;
      line-height: 0;
      &:not(:last-child){
        border-bottom: 2rpx solid #D3D3D3;
      }
      .iconfont:not(.icon-arrowRight){
        padding: 0 40rpx;
        width: 40rpx;
        height: 40rpx;
        font-size: 44rpx;
        vertical-align: middle;
        color: #39A8FD;
      }
      .icon-arrowRight{
        padding-right: 40rpx;
        float: right;
        font-size: 38rpx;
        color: #E1E1E0;
      }
    }
  }

  .mine-service {
    position: relative;
    flex: .28;
    font-size: 28rpx;
    color: #9B9B9C;
    text-align: center;
  }
  .disabled > text:not(.icon-arrowRight){
    color: #BBBBBB!important;
  }
</style>
